<template>
  <div class="app-container">
    <!-- 添加或修改客户管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body v-drag-fullscreen>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form-flex">
        <el-row :gutter="20">
          <el-col :span="8" :xs="24">
            <el-form-item label="客户头像">
              <picupload
                width="150"
                height="200"
                title="业主头像"
                httpRequest="/common/minioUpload"
                :src.sync="form.customHeadImg"></picupload>
            </el-form-item>
          </el-col>
          <el-col :span="16" :xs="24">
            <el-row>
              <el-col :span="24" :xs="24">
                <el-form-item label="客户类型" prop="customType">
                  <el-radio-group v-model="form.customType"  :disabled="disabled">
                    <el-radio
                      v-for="item in dict.custom_type"
                      :key="item.dictValue"
                      :label="item.dictValue">
                      {{item.dictLabel}}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item label="所属小区" prop="communityName">
                  <el-input v-model="form.communityName" placeholder="请输入所属小区" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24" v-if="form.customType=='002'">
                <el-form-item label="公司名称" prop="corporateName">
                  <el-input v-model="form.corporateName" placeholder="请输入公司名称" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item :label="form.customType=='001'?'客户名称':'法人名称'" prop="customName">
                  <el-input v-model="form.customName" :placeholder="`请输入${form.customType=='001'?'客户名称':'法人名称'}`" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item label="手机号码" prop="cellPhoneNumber">
                  <el-input v-model="form.cellPhoneNumber" placeholder="请输入手机号码" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24" v-if="form.customType=='002'">
                <el-form-item label="联系人" prop="contactAddress">
                  <el-input v-model="form.contactAddress" placeholder="请输入联系人" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24" v-if="form.customType=='002'">
                <el-form-item label="联系地址" prop="contactAddress">
                  <el-input v-model="form.contactAddress" placeholder="请输入联系地址" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item label="身份证号" prop="idCard" v-if="form.customType=='001'">
                  <el-input v-model="form.idCard" placeholder="请输入身份证号" :disabled="disabled"/>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item label="性别" prop="sex" v-if="form.customType=='001'">
                  <el-radio-group v-model="form.sex" :disabled="disabled">
                    <el-radio
                      v-for="item in dict.sys_user_sex"
                      :key="item.dictValue"
                      :label="item.dictValue">
                      {{item.dictLabel}}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item label="出生日期" prop="birthDate" v-if="form.customType=='001'">
                  <el-date-picker clearable size="small" :disabled="disabled"
                                  v-model="form.birthDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="选择出生日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getCustomInfo, addCustomInfo, updateCustomInfo} from "@/api/waitress/customInfo";

  export default {
    name: "CustomInfoFrom",
    dicts: ['custom_type','sys_user_sex'],
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //是否禁用
        disabled: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          customName: [
            {required: true, message: "客户名称不能为空", trigger: "blur"}
          ],
          cellPhoneNumber: [
            {required: true, message: "手机号不能为空", trigger: "blur"},
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ],
          idCard: [
            {required: false, validator: this.checkIDCard, trigger: 'blur'}
          ]
        }
      };
    },
    created() {

    },
    methods: {
      show(option) {
        this.reset();
        this.disabled = option.type == 'VIEW'
        if (option.type == 'ADD') {
          this.open = true;
          this.title = "新增客户管理";
          if(option.currentNode.modelType == 'community'){
            this.form.communityId = option.currentNode.id
            this.form.communityName = option.currentNode.label
          }
        } else if (option.type == 'UPDATE' || option.type == 'VIEW') {
          getCustomInfo(option.id).then(response => {
            this.form = response.data;

            if (option.type == 'VIEW') {
              this.title = "查看客户管理";
            } else {
              this.title = "修改客户管理";
            }
            this.open = true;
          });
        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.$emit("cancel")
      },
      // 表单重置
      reset() {
        this.form = {
          customId: null,
          deptId: null,
          communityId: null,
          customName: null,
          customHeadImg: null,
          cellPhoneNumber: null,
          idCard: null,
          customType: '001', //业主类型
          sex: '2', //业主性别
          birthDate: null,
          customNumber: null,
          corporateName: null,
          contactAddress: null,
          linkman: null,
          ancestors: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          communityName: null
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.customId != null) {
              updateCustomInfo(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.cancel()
              });
            } else {
              addCustomInfo(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.cancel()
              });
            }
          }
        });
      }
    }
  };
</script>
